<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="author" content="JFinal">
    <meta name="keywords" content="基于jfinal enjoy模板引擎导出MySQL数据库表结构">
    <meta name="description" content="基于jfinal enjoy模板引擎导出MySQL数据库表结构">

    <title>数据库表结构</title>
    <style type="text/css">
			.database {width:100%;min-height:30px;top:0px;z-index:1000;margin:1px auto;position:fixed;border: 0px;background-color:#FBF8F8;}

			a{text-decoration: none;font-size: 13px;color:black; display: inline-block; height: 25px; background-color:#F2F2F2;line-height: 25px; padding: 0 10px; border: 1px solid #e2e2e2; margin: 0 2px; border-radius: 4px; vertical-align: middle; cursor:pointer;}
			a:hover{text-decoration: none; border: 1px solid #1E9FFF;}
			a.current{text-decoration: none;display: inline-block; height: 25px; line-height: 25px; padding: 0 10px; margin: 0 2px; color: #fff; background-color: #1E9FFF; border: 1px solid #1E9FFF; cursor: pointer;}

			table.tableShow{color:#666;border:1px solid #cad9ea;table-layout:automatic;empty-cells:show;border-collapse: collapse;margin:0 auto;cursor:default;}
			table.tableShow th {font-weight: bold;color: #4D647C;background: #E5EDF9;height:30px;white-space:nowrap;padding:0 1em 0;word-break:keep-all; border:1px solid #cad9ea;}
			table.tableShow td{height:25px;padding:0 1em 0;border:1px solid #cad9ea;}
			table.tableShow tr:hover{background: #FFFF99;}

			.primarykey {color:red;font-weight:bold;}
		</style>
</head>

<body>
<div id="database" class="database">
    #for(db : batchDbTables)
    <a href="javascript:void(0);" onclick="showTables(this, '#(db.key)');" /><span>数据库#(db.key)</span></a>
    #end
</div>
<div id="tables" style="display:block;">
    #for(db : batchDbTables)
    <div id="#(db.key)" style="width:100%; display:none;">
        <table id="db_#(db.key)" class="tableShow">
            #for(tb : db.value)
            <tr>
                <th colspan="6" class="tableRow">
                    #if(tb.remark)
                    #(tb.remark)：
                    #end
                    #(tb.tableName)
                    #if(tb.primaryKey)
                    （主键：#(tb.primaryKey)）
                    #end
                </th>
            </tr>
            <tr class="tableTitle">
                <th>序号</td>
                <th>字段名</td>
                <th>类型</td>
                <th>是否允许为空</td>
                <th>默认值</td>
                <th>说明</td>
            </tr>
            #for(col : tb.columns)
            <tr>
                <td>#(for.count)</td>
                <td #if(col.primaryKey)class="primarykey"#end>#(col.columnName) #if(col.primaryKey)(PK)#end</td>
                <td>#(col.columnType)</td>
                <td>#(col.nullable)</td>
                <td>#(col.defaultValue)</td>
                <td>#(col.remark)</td>
            </tr>
            #end
            #end
        </table>
    </div>
    #end
</div>
</body>
<script type="text/javascript">
	var buttons = document.getElementsByTagName("a");
	var tables = document.getElementsByTagName("table");
	document.getElementById("tables").style.marginTop = (document.getElementById("database").clientHeight + 5) + "px";
	if (buttons.length > 0) {
		buttons[0].click();
	}

	function showTables(obj, id) {
		for (var i = 0; i < tables.length; i++) {
			buttons[i].className = "";
			if (tables[i].parentElement.id != id) {
				tables[i].parentElement.style.display = "none";
			} else {
				tables[i].parentElement.style.display = "block";
			}
		}
		obj.className = "current";
	};
	</script>
</html>